<template>
  <view class="order-page">
    <tm-tabs v-model="tabActive" :list="tabData" class="mx-n10" @change="onTabChange"></tm-tabs>
    <!--  -->
    <tm-row :wrap="false" class="mx-n10 my-n5">
      <tm-button
        block
        size="s"
        round="50"
        :skin="statusActive === 0 ? 'primary' : 'outlined'"
        @click="onStatusChange(0)"
        >{{ $trans('pages.order.tab.orderStatus.active') }}</tm-button
      >
      <tm-button
        block
        size="s"
        round="50"
        :skin="statusActive === 1 ? 'primary' : 'outlined'"
        @click="onStatusChange(1)"
        >{{ $trans('pages.order.tab.orderStatus.complate') }}</tm-button
      >
    </tm-row>
    <!--  -->
    <view class="order-page-container my-n5">
      <view class="data-scroll-view">
        <!-- <tm-row
          v-for="(item, index) in listData"
          :key="index"
          :wrap="false"
          class="py-n10 mx-n10 border-b-1"
          
        >
        </tm-row> -->

        <tm-sheet
          v-for="(item, index) in listData"
          :key="index"
          shadow="10"
          @click="onItemClick(item)"
        >
          <!--  -->
          <tm-row justify="space-between" class="pb-n5 border-b-1">
            <tm-row align="center">
              <tm-icon name="store-2-line" size="28"></tm-icon>
              <tm-text fontSize="28" class="ml-n2">{{ item.merchantName }}</tm-text>
            </tm-row>
            <tm-text>{{ item.orderStatus }}</tm-text>
          </tm-row>
          <!--  -->
          <tm-row :wrap="false" align="center" class="my-n5">
            <tm-image :src="item.productImage" :width="100" :height="100" round="10"></tm-image>
            <tm-text class="flex-1 mx-n5" color="#000001" fontSize="32">{{
              item.productName
            }}</tm-text>
            <tm-sheet margin="0" padding="0" round="0" color="transparent" class="text-align-right">
              <tm-text color="#000001" fontSize="32">₦ {{ item.price }}</tm-text>
              <tm-text color="#959eb0" fontSize="24">x{{ item.quantity }}</tm-text>
            </tm-sheet>
          </tm-row>
          <!--  -->
          <tm-row>
            <tm-text color="#959eb0" fontSize="28">{{ item.createTime }}</tm-text>
          </tm-row>
        </tm-sheet>
      </view>
      <!-- <scroll-view class="data-scroll-view">
      </scroll-view> -->
    </view>
  </view>
</template>
<script lang="ts" setup>
  import { ORDER_LIST } from './MOCK';
  import { translate } from '@/locale';
  const tabData = ref([
    translate('pages.order.tab.cardOrder'),
    translate('pages.order.tab.pointsOrder'),
  ]);
  const listData = ref([]);
  const tabActive = ref(0);
  const statusActive = ref(0);
  const getList = () => {
    listData.value = ORDER_LIST;
  };

  const onTabChange = () => {
    console.log('tabActive', tabActive.value);
  };
  const onStatusChange = (status: number) => {
    statusActive.value = status;
    console.log('statusActive', statusActive.value);
  };

  const onItemClick = (dataItem) => {
    uni.navigateTo({
      url: `/pages/orderDetail/index?id=${dataItem.orderId}`,
    });
  };

  onMounted(() => {
    getList();
  });
</script>
<style lang="scss" scoped>
  uni-page-body {
    height: 100%;
  }
</style>
<style lang="scss">
  page {
    background-color: #fff;
  }
  .order-page {
    height: 100%;
    display: flex;
    flex-flow: column;
    .order-page-container {
      flex: 1;
      overflow: hidden;
      display: flex;
      flex-flow: column;
      .data-scroll-view {
        flex: 1;
        // height: 1px;
        overflow: auto;
      }
    }
  }
</style>
